<template>
  <div style="height: 100%" class="workspace">
    <el-container ref="listWarp" style="height: 100%; background-color: #f1f1f1">
        <el-aside style="width: 200px;background-color: #fff;margin-right: 10px;">
           <div class="tabList">
              <div v-for="item in tabList" :class="safeModal==item.type?'on':''" @click="evtChangeTab(item)">
                {{item.name}}
                <i class="el-icon-arrow-right" v-if="safeModal==item.type" style="float: right;margin-top: 13px"></i>
              </div>
           </div>
        </el-aside>
         <el-main style="padding: 0">
              <component :is="safeModal"></component>
        </el-main>
    </el-container>
  </div>
</template>
<script>
import collegeTab from "./collegeTab"
import buildTab from "./buildTab"
export default {
  components: {collegeTab,buildTab},
  data() {
    return {
      loading: false,
      safeModal:"collegeTab",
      tabList:[
        {
          name:"学院安全报表",
          type:"collegeTab"
        },{
          name:"楼宇安全报表",
          type:"buildTab"
        }
      ]
    };
  },
  methods: {
    toolButtonClick(val){
      switch (val) {
        case "导出":
          this.$refs.exportExcel.exportOpen();
        break;
      }
    },
    evtChangeTab(item){
         this.safeModal = item.type;
    },

  },
  created() {

  },
};
</script>
<style scoped lang="scss">
.colTitle {
  display: inline-block;
  line-height: 34px;
  margin-right: 10px;
}
  .tabList{
    padding: 10px;
     >div{
        height: 40px;
        line-height: 40px;
       cursor: pointer;
     }
    .on{
       color: #3484ef;
    }
  }
</style>